<template>
    <a-card
        class="general-card"
        :title="$t('che-dui-chu-zhi-pai-hang')"
        :header-style="{ paddingBottom: '12px' }"
    >
        <a-table
            :loading="tableConfig.loading"
            :columns="tableConfig.columns"
            :data="tableConfig.data"
            :pagination="false"
        >
        </a-table>
    </a-card>
</template>

<script lang="ts" setup>
    import { reactive } from 'vue';
    import { useI18n } from 'vue-i18n';
    import { getFleetTop10List } from '../service';

    const { t } = useI18n();

    const tableConfig = reactive({
        data: [],
        loading: false,
        columns: [
            {
                title: t('pai-ming'),
                dataIndex: 'index',
            },
            {
                title: t('che-dui-ming'),
                dataIndex: 'fleetName',
            },
            {
                title: t('chu-zhi-jin-e'),
                dataIndex: 'rechargeAmount',
            },
        ],
    });
    async function loadTableData() {
        try {
            tableConfig.loading = true;
            const data = await getFleetTop10List();
            tableConfig.data = (data?.result || []).map((item, index) => {
                return {
                    ...item,
                    index: index + 1,
                };
            });
        } finally {
            tableConfig.loading = false;
        }
    }
    loadTableData();
</script>

<style lang="less" scoped></style>
